@import './commonfunc'
@import '../../../css/css/index'
@import './icon'
@import './form'
@import '../../../css/css/item'
//弹出层
@import '../../../css/css/actionside'   
//筛选
@import '../../../css/css/screen'


.size20
  font-size: 20rpx
  &.no-lh
    line-height: 20rpx

.mb10
  margin-bottom: 10rpx
.mt10
  margin-top: 10rpx
.mt50
  margin-top: 50rpx
.ml10
  margin-left: 10rpx
.ml40
  margin-left: 40rpx


likeTabCfg = {
  $br: false
  $height: $screenHeight
  $line-height: false
  $white-space: nowrap
  $padding: 0 30rpx 0 0
  $sizeM: false
  $itemPadding: false
  $itemMargin: 0 $space-default
  $color: $color-text-info
  $itemLine: false
  $disabledBg: $color-line
  $activeType: 'line'       //line单线条样式， card卡片化样式   lr左右结构带有footer或header

  $activeBg: false
  $activeColor: $color-text-title 
  $activeFw: bold
  $position: 'bottom'
}
borderCfg = {
  $lineBot: 22rpx
  $lineColor: $color-primary 
  $lineHei: 14rpx
}
ss-like-tabs('.list-tabs', likeTabCfg, borderCfg, '.item-title')
likeTabCfg2 = {
  $flex: false
  $br: false
  $height: $screenHeight
  $line-height: false
  $white-space: nowrap
  $padding: 0 30rpx 0 0
  $sizeM: false
  $itemPadding: false
  $itemMargin: 0 $space-default
  $color: $color-text-info
  $itemLine: false
  $disabledBg: $color-line
  $activeType: 'card'       //line单线条样式， card卡片化样式   lr左右结构带有footer或header

  $activeBg: false
  $activeColor: $color-text-title 
  $activeFw: bold
  $position: 'bottom'
}
ss-like-tabs('.list-tabs-column', likeTabCfg2)

.row-between-flex
  ss-display-flex(row nowrap, space-between, center)
  margin-left: -($space-primary)
  >.ui-item
    box-sizing: border-box
    flex: 1
    margin-left: $space-primary
.row-flex-ui-item-fist-flex
  ss-display-flex()
  >.ui-item
    &:first-child
      flex: 1

ss-func-item('.card-list-item')
lritemCfg = {
  $bb: false 
  $padding: 15rpx 0 
  $pic-wid: 180rpx
  $pic-bb: $br
  $pic-hei: 180rpx
}
ss-func-item('.lr-item', lritemCfg)

ss-func-display('.display-card')
ss-func-display-options('.display-card-more')

//以下的标准由标题是36rpx，内容28rpx组成
cardCfg = {
  $bg: $color-bg-primary
  $br: $br
  $bs: false
  $padding: 24rpx $space-default              //23由30-7标题的行高
  $hpading: false 
  $hhei:  false
  $hborder: false
  $bpading: false
}
ss-func-display-options('.card-item', cardCfg, '.item-head', '.item-body')
.card-item
  // font-size: $size-form
  [class*='title-default']
    margin-top: -1rpx
  .item-head
    &.only
      margin-bottom: 17rpx    //17由30 - 13标题与item行高
  .item-body
    >.ui-item
      padding-bottom: 18rpx //18由30 - 12两个item行高
      display: block
      &:last-child
        padding-bottom: 0
  .item-flex,.item-content
    ss-display-flex(row nowrap)
  .item-content
    flex: 1
    color: $color-text
    margin-left: $space-default
    >.ui-item
      &:not(:only-child)
        &:last-child
          margin-left: auto 


couponCfg = {
  $bg: #fff
  $bb: false
  $br: $br-lg
  $padding: false
  $pic-wid: false
  $footerText: false
}
ss-func-item('.coupon-item', couponCfg)
.coupon-item
  background: radial-gradient(circle at right top, $color-bg 16rpx,  #fff 0) top left / 75% 51% no-repeat,
      radial-gradient(circle at right bottom, $color-bg 16rpx,  #fff 0) bottom left /75% 51% no-repeat,
      radial-gradient(circle at left top, $color-bg 16rpx, #fff 0) top right /25% 51% no-repeat,
      radial-gradient(circle at left bottom, $color-bg 16rpx, #fff 0) bottom right /25% 51% no-repeat;
  // filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))
  .item-body
    margin: 0 $space-default
    padding: $space-default 0
    width: 'calc(75% - %s)' % ($space-default * 2 - 2rpx)
  .item-footer
    width: 25%
    border-left: 4rpx dotted $color-line
    ss-display-flex(row, center, center)

//btn
.btn-wid-1
  width: 325rpx
.btn-wid-2
  width: 162rpx
.btn-wid-3
  width:205rpx


//boxshadow
.box-shadow
  box-shadow: $box-shadow
.box-shadow-top
  box-shadow: $box-shadow-top
.box-shadow-bottom
  box-shadow: $box-shadow-bottom


.mtb-d-m
  margin: $space-default 0 $space-primary 0


.icon-width
  width: $space-default
  font-size: 26rpx
  text-align: right

.click-icon-width
  width: 100rpx
  text-align: center

.tag-display
  border-radius: $br-sm 
  position: relative
  background: linear-gradient(-90deg, #FFF2EB, #FFFAF7)
  color: #D49D7F
  .item-icon
    position: absolute
    bottom: 30rpx
    right: 30rpx
    width: 150rpx;
    text-align: right;
    background: linear-gradient(90deg, rgba(255,250,247,0) 0%, #FFF2EB 50%, #FFF2EB 100%);
  &.grey
    background: #f8f8f8
    color: $color-text

.ss-list-margin
  ss-row-list($space-minor,  $marginBottom: $space-minor)


.bg-000-op-9
  background: fade-out(#000, .9)
.bg-000-op-7
  background: fade-out(#000, .7)

@import '../../../css/css/custom'